<template>
    <div class="commonPagination">
        <span>共{{ pageTotal }}条</span>
        <el-dropdown class="change_size" popper-class="change_size_popper" placement="top" trigger="click">
            <span class="el-dropdown-link">
                {{ sizeList[sizeIndex] }}项/ 每页<i-ep-ArrowUp class="ArrowUp" />
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="(item, index) in sizeList" :class="sizeIndex == index ? 'aciveSize' : ''"
                        @click="ChangeSize(index)">{{ item }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <div class="pageBtn firstPage" :class="currentPage > 1 ? 'backg' : ''" @click="gotoPage(1)">
            <img class="btnIcon " src="../assets/images/images_new/firstPage.png" alt="">
        </div>
        <div class="pageBtn arrow-left" :class="currentPage > 1 ? 'backg' : ''" @click="prevPage()">
            <img class="btnIcon " src="../assets/images/images_new/arrow-left.png" alt="">
        </div>
        <el-input class="pageInput" v-model="currentPage" placeholder="" @blur="jumpPage" />
        <span> / {{ totalPages }}</span>
        <div class="pageBtn arrow-right" :class="currentPage < totalPages ? 'backg' : ''" @click="nextPage()">
            <img class="btnIcon " src="../assets/images/images_new/arrow-right.png" alt="">
        </div>

        <div class="pageBtn lastPage" :class="currentPage < totalPages ? 'backg' : ''" @click="gotoPage(totalPages)">
            <img class="btnIcon " src="../assets/images/images_new/lastPage.png" alt="">
        </div>

    </div>
</template>

<script setup lang="ts">

const props = defineProps({
    pageTotal: {
        type: Number,
        default: 0
    },
    pageSize: {
        type: Number,
        default: 10
    },
    pageNum: {
        type: Number,
        default: 1
    }
})

let currentPage = ref(1);//当前页

let totalPages = ref(1);//总页数

const emit = defineEmits(["pageFunc", 'sizeChange']);

const sizeList = [10, 15, 20, 30, 50, 100, 150, 200, 500, 1000];

let sizeIndex = ref(0);

//跳转到某一页
const gotoPage = (page: number) => {
    // console.log('pageNum', page);
    if (page >= 1 && page <= totalPages.value && currentPage.value != page) {
        let pageNew = page;
        emit("pageFunc", pageNew);
    }
}

//上一页
const prevPage = () => {
    if (currentPage.value > 1) {
        let pageNew = currentPage.value - 1;
        emit("pageFunc", pageNew);
    }

}

//下一页
const nextPage = () => {
    if (currentPage.value < totalPages.value) {
        let pageNew = currentPage.value + 1;
        emit("pageFunc", pageNew);
    }
}

const jumpPage = () => {
    var reg = /^[1-9]\d*$/;
    //如果不是正整数,恢复之前的
    if (!reg.test(String(currentPage.value))) {
        currentPage.value = props.pageNum;
    } else {
        //在1-总页数之间,跳转过去
        if (currentPage.value > 0 && currentPage.value <= totalPages.value) {
            emit("pageFunc", Number(currentPage.value));
        } else if (currentPage.value > totalPages.value) {//大于总页数,跳转到总页数
            currentPage.value = totalPages.value;
            if (props.pageNum != totalPages.value) {
                emit("pageFunc", Number(currentPage.value));
            }

        }
        // else if (currentPage.value < 1) {
        //     currentPage.value = 1;
        //     if (props.pageNum != 1) {
        //         emit("pageFunc", Number(currentPage.value));
        //     }
        // }
    }


}

//每页条数改变
const ChangeSize = (index: number) => {
    if (sizeIndex.value != index) {
        sizeIndex.value = index;
        emit('sizeChange', sizeList[sizeIndex.value]);
        //重新计算总页数
        nextTick(() => {
            totalPages.value = props.pageTotal != 0 ? Math.ceil(props.pageTotal / props.pageSize) : 1;
            if (currentPage.value > totalPages.value) {
                let pageNew = totalPages.value;
                emit("pageFunc", pageNew);
            }
        })

    }

}

watch(() => props.pageNum, (newVal) => {
    currentPage.value = newVal;
})

watch(() => props.pageTotal, (newVal) => {
    totalPages.value = props.pageTotal != 0 ? Math.ceil(props.pageTotal / props.pageSize) : 1;
})


</script>

<style lang="scss" scoped>
.commonPagination {
    font-size: 14px;
    margin-right: -7px;

    .change_size {
        cursor: pointer;
        margin-left: 20px;
        vertical-align: baseline;


        .el-dropdown-link {
            width: 128px;
            height: 32px;
            line-height: 32px;
            border: 1px solid rgb(220, 223, 230);
            text-align: right;
            font-size: 14px;

            //    box-shadow: none;
            &:hover {
                // box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(192, 164, 91, 0.8);
                // border-color: rgba(192, 164, 91, 0.8);
                background-color: rgba(0, 0, 0, 0.1);
            }

            .ArrowUp {
                width: 14px;
                height: 14px;
                margin-right: 14px;
                margin-left: 8px;
            }
        }
    }

    .pageBtn {
        display: inline-block;
        width: 24px;
        line-height: 32px;
        text-align: center;

        &.backg {
            cursor: pointer;
            &:hover {
                background-color: rgba(0, 0, 0, 0.1);
                border-radius: 2px;
            }
        }


        &.firstPage {

            margin: 0 5px 0 22px;


            .btnIcon {
                height: 12px;
            }
        }

        &.arrow-left {
            margin-right: 4px;

            .btnIcon {
                width: 14px;
            }
        }

        &.arrow-right {
            margin: 0 5px 0 4px;

            .btnIcon {
                width: 14px;
            }
        }

        &.lastPage {
            .btnIcon {
                height: 12px;
            }
        }
    }








    .pageInput {
        width: 32px;
        height: 32px;
        // display: inline-block;
        vertical-align: baseline;
        // border: 1px solid rgb(228, 232, 235);
        border: none;

        :deep(.el-input__wrapper) {
            padding: 1px;
            // box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
            box-shadow: none;
            background: rgb(255, 255, 255);
            border: 1px solid rgb(228, 232, 235);

            &.is-focus {
                // box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(192, 164, 91, 0.8);
                border-color: rgba(192, 164, 91, 0.8);
            }

            .el-input__inner {
                text-align: center;
                font-size: 14px;
                color: rgb(192, 164, 91);
            }
        }
    }
}

.el-dropdown-link:focus-visible {
    outline: none;
}
</style>
<style lang="scss">
.change_size_popper {
    .el-dropdown-menu {
        display: flex;
        width: 330px;
        height: 220px;
        flex-wrap: wrap;
        padding: 32px 25px;
        align-items: flex-start;

        .el-dropdown-menu__item {
            width: 70px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            padding: 0;
            justify-content: center;
            color: rgb(48, 49, 51);
            margin-bottom: 36px;

            &:focus {
                background: none;
            }

            &:hover {
                background-color: rgba(66, 121, 179, 0.1);
                border-radius: 2px;
                color: rgb(48, 49, 51);
            }


            &.aciveSize {
                // color: #c0a45b!important;
                color: #FFF;
                background-color: rgb(192, 164, 91);
                border-radius: 2px;
            }
        }

    }
}
</style>
